<template>
<div class="di">
  <div class="biankuang">
  <div class="top1">
    <i class="el-icon-s-platform"></i>
    <span class="mtitle">商户信息</span>
    <el-button type="primary" round @click="fanhui" class="back">返回</el-button>
    <div class="xian"></div>
  </div>
    <div class="mid">
      <el-descriptions title="商户信息" :column="2" border :contentStyle="{'text-align': 'center'}" :labelStyle="{width: '210px',height: '65px','text-align': 'center'}">
        <el-descriptions-item label="商户名称">{{merchantName}}</el-descriptions-item>
        <el-descriptions-item label="营业执照号码" >{{businessLicenseId}}</el-descriptions-item>
        <el-descriptions-item label="负责人">{{director}}</el-descriptions-item>
        <el-descriptions-item label="负责人手机号">{{mobile}}</el-descriptions-item>
        <el-descriptions-item label="身份证号码">{{idCard}}</el-descriptions-item>
        <el-descriptions-item label="经营区域">{{operatingArea}}</el-descriptions-item>
        <el-descriptions-item label="注册时间">{{regTime}}</el-descriptions-item>
        <el-descriptions-item label="审核状态"> {{ status === '0' ? '未审核' : (status === '1' ? '已通过' : '已拒绝') }}</el-descriptions-item>
        </el-descriptions>
      <el-descriptions :column="1" border :contentStyle="{'text-align': 'center'}" :labelStyle="{width: '210px',height: '65px','text-align': 'center'}">
        <el-descriptions-item label="详细地址">{{province+city+district+address}}</el-descriptions-item>
        <el-descriptions-item label="商家介绍">{{description}}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="bottom_zp">商户照片</div>
    <div class="bottom">

      <div class="one">
      <div class="btitle">门面照片：</div>
      <div class="image">
          <el-image
            style="width: 160px; height: 100px"
            :src="shopurl"
            :fit="fits"></el-image>
      </div>
      </div>
      <div class="two">
      <div class="btitle">营业执照：</div>
      <div class="image">
        <el-image
          style="width: 160px; height: 100px"
          :src="liurl"
          :fit="fits"></el-image>
      </div>
      </div>
      <div class="three">
        <div class="btitle">身份证正反面照片：</div>
        <div class="ztupian">
        <div class="simage">
          <el-image
            style="width: 160px; height: 100px"
            :src="front"
            :fit="fits"></el-image>
        </div>
        <div class="ssimage">
          <el-image
            style="width: 160px; height: 100px"
            :src="opposite"
            :fit="fits"></el-image>
        </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>


import {listMerchant} from "@/api/carService/merchant";

export default {
  components: {},
  props: [],
  data() {
    return {
      listMerchant:[],
      merchantName:"",
      businessLicenseId:"",
      director:"",
      mobile:"",
      idCard:"",
      operatingArea:"",
      regTime:"",
      status:"",
      address:"",
      description:"",
      fits:  'cover',
      shopurl: '',
      province:'',
      city:'',
      district:'',
      liurl:'',
      front:'',
      opposite:'',
    }
  },
  computed: {

  },
  created() {
    this.merchantId=this.$route.params.merchantId;
    console.log(this.merchantId)
    listMerchant({merchantId: this.merchantId}).then(response => {
      console.log(response+"11111")
      this.merchantName = response.rows[0].merchantName;
      this.regTime = response.rows[0].regTime;
      this.status = response.rows[0].status;
      this.businessLicenseId = response.rows[0].merchantVerification.businessLicenseId;
      this.director = response.rows[0].merchantVerification.director;
      this.mobile = response.rows[0].merchantVerification.mobile;
      this.idCard = response.rows[0].merchantVerification.idCard;
      this.operatingArea = response.rows[0].operatingArea;
      this.description = response.rows[0].description;
      this.address = response.rows[0].address;
      this.shopurl = response.rows[0].merchantImgs.img;
      this.province = response.rows[0].province;
      this.city = response.rows[0].city;
      this.district = response.rows[0].district;
      this.liurl = response.rows[0].merchantVerification.businessLicenseImg;
      this.front = response.rows[0].merchantVerification.front;
      this.opposite = response.rows[0].merchantVerification.opposite;
      this.listMerchant = response.rows;
      this.total = response.total;
      this.loading = false;
    });
  },
  methods: {
    fanhui(){
      this.$router.push({path: "/merchant/merchant"});
    },
    /** 查询商户管理列表 */
  }
};
</script>
<style>
.biankuang{
  width: 95%;
  height: 750px;
  border: solid 1px #d5d5d5;
  margin: 20px auto;
}
.top1{
  margin-top: 15px;
}
.el-icon-s-platform{
  font-size: 30px;
  margin-left: 10px;
}
.mtitle{
  padding-left: 10px;
  font-size: small;
  position: relative;
  top: -6px;
}
.xian{
  border: solid 1px #d5d5d5;
  width: 98%;
  margin:  10px auto;
}
.back{
  float: right;
  margin-right: 15px;
  margin-top: -5px;
}
.mid{
  margin: 15px;
}
.bottom{
  margin-left: 20px;
  display: flex;
}
.bottom_zp{
  font-weight: bolder;
  margin-left: 20px;
  margin-bottom: 15px;
}
.image{
  margin-left: 80px;
  margin-top: 10px;
}
.btitle{
  font-size: small;
}
.two ,.three{
  margin-left: 10px;
}

.ztupian{
  display: flex;
}
.simage{
  margin-left: 120px;
  margin-top: 10px;
}
.ssimage{
  margin-left: 40px;
  margin-top: 10px;
}
</style>
